import React, { Component } from 'react';
import {
	StyleSheet, Text, FlatList, View, Image
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common.js';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import { orderStyle, commonStyle } from '../_common/style';
import OrderDetailsService from '../_common/service';
import navigationSeevice from '../../../../components/navigation/navigationSeevice';
import moment from 'moment';

const scale = GLOBAL.SCALE;

let sendData = {
	onrefresh: false,
	pageNo: 1,
	//	pageSize: 20
};

export class LogisticsListPage extends Component {
	static navigationOptions = ({ navigation }) => {
		let { type, orderType } = navigation.state.params || {};
		return {
			headerTitle: type == 'WL' ? '物流信息列表' : `${orderType == 'P' ? '实收' : '实发'}明细列表`,
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};

	constructor(props) {
		super(props);
		let { orderType, noticeId } = props.navigation.state.params || {};
		sendData.orderType = orderType;
		sendData.noticeId = noticeId;
		this.state = {
			newLotData: [],  // 待审批
			status: 'loading',
			loadIcon: false,  // 下拉涮新的 图标
			timeModel: false,//时间显示,
			timeStart: null,
			timeEnd: null,
		}
		this.pageNo = 1;
		this.totalPage = 1;
	}

	componentWillMount () {
		this._getListData();
	}

	componentWillUnmount () {
		sendData.pageNo = 1;
	}



	//获取待审批,已审批列表
	async _getListData (agentObj) {
		let { type } = this.props.navigation.state.params || {};
		Object.assign(sendData, agentObj);
		this.setState({
			loadIcon: true
		})
		let responseData = type == 'WL' ? await OrderDetailsService.stockWlList(sendData) : await OrderDetailsService.stockMxList(sendData);
		console.log('responseData', type == 'WL' ? '物流' : '明细', responseData)
		this.setState({
			loadIcon: false
		});
		if (type == 'WL' && responseData || type == 'MX' && responseData.rows) {
			this.totalPage = responseData.totalPage;
			if (sendData.onrefresh) {  // 加载
				this.setState({
					newLotData: this.state.newLotData.concat(type == 'WL' ? responseData : responseData.rows),
					status: 'data'
				})
			} else { // 刷新
				this.setState({
					newLotData: type == 'WL' ? responseData : responseData.rows,
					status: type == 'WL' ? (responseData.length ? 'data' : 'empty') : (responseData.rows.length ? 'data' : 'empty')
				})
			}
		} else {
			this.setState({
				status: 'error'
			})
		}
	}

	// 下拉更新函数
	_isLoadRefresh () {
		this.pageNo = 1;
		sendData.onrefresh = false,
			this._getListData();
	}

	//上拉加载
	_loadData () {
		if (this.totalPage > this.pageNo) {
			this.pageNo++;
			this._getListData({
				pageNo: this.pageNo,
				onrefresh: true
			});
		}
	}

	//数据加载出错回调
	_onErrorPress = () => {
		this.setState({
			status: 'loading'
		}, function () {
			this._getListData();
		})
	}

	_renderItem (customer) {
		let { type } = this.props.navigation.state.params || {};
		return type == 'WL' ? this._renderItemWl(customer.item) : this._renderItemMx(customer.item);
	}

	//明细
	_renderItemMx = (data) => {
		let { orderType } = sendData || {};
		let { noticeId, statusName, shippingTypeName, signTime,receivingTypeName, sendQuantity, settlementQuantity, sheetId, signQuantity, outStockDate } = data || {};
		let time = orderType == 'S' ? outStockDate : signTime;
		return (
			<View style={[orderStyle.showBox, { marginTop: 20 * scale }]}>
				<View style={styles.tabLie} >
					<View style={[orderStyle.listHead, commonStyle.row2]}>
						<Text style={orderStyle.listTitle}>{orderType == 'S' ? '发货' : '收货'}单 {sheetId}</Text>
						<Text style={orderStyle.listStatus}>{statusName}</Text>
					</View>
					<View style={commonStyle.row3}>
						<Text style={[orderStyle.listValue]}>{orderType == 'S' ?shippingTypeName:receivingTypeName}</Text>
						<Text style={[orderStyle.xian, { paddingTop: 5 * scale }]}>|</Text>
						<Text style={[orderStyle.listValue]}>{time && moment(time).format("YYYY/MM/DD")} {orderType == 'S' ? '发货' : '收货'}</Text>
					</View>
					<View style={commonStyle.row}>
						<View style={orderStyle.listRow}>
							<Text style={[orderStyle.listLable]}>{orderType == 'S' ? '发货' : '收货'}量(吨)</Text>
							<Text style={[orderStyle.listValue]}>{orderType == 'S' ? sendQuantity : signQuantity || '-'}</Text>
						</View>
						<View style={orderStyle.listRow}>
							<Text style={[orderStyle.listLable]}>结算量(吨)</Text>
							<Text style={[orderStyle.listValue]}>{settlementQuantity || '-'}</Text>
						</View>
						<View style={[orderStyle.listRow]}>
							<Text style={orderStyle.listLoad} onPress={() => { navigationSeevice.navigate('DefiniteDetailsPage', { orderType, sheetId }) }}>[{orderType == 'S' ? '发货' : '收货'}明细]</Text>
						</View>
					</View>
				</View>
			</View>
		)

	}

	//物流
	_renderItemWl = (data) => {
		let { orderType, noticeId } = sendData;
		let { subjectPlanId, planStatusName, transportTypeName, createTime,
			sumPlanQuantity, sumDispatchQuantity, sumSheetQuantity } = data || {};
		return (
			<View style={[orderStyle.showBox, { marginTop: 20 * scale }]}>
				<View style={styles.tabLie}>
					<View style={[orderStyle.listHead, commonStyle.row2]}>
						<Text style={orderStyle.listTitle}>委托号 {subjectPlanId || '-'}</Text>
						<Text style={orderStyle.listStatus}>{planStatusName || '-'}</Text>
					</View>
					<View style={commonStyle.row3}>
						<Text style={[orderStyle.listValue]}>{orderType == 'S' ? '销售出库' : '采购入库'}通知单</Text>
						<Text style={[orderStyle.xian, { paddingTop: 5 * scale }]}>|</Text>
						<Text style={[orderStyle.listValue]}>{transportTypeName || '-'}</Text>
						<Text style={[orderStyle.xian, { paddingTop: 5 * scale }]}>|</Text>
						<Text style={[orderStyle.listValue]}>{createTime && moment(createTime).format("YYYY/MM/DD")} 创建</Text>
					</View>
					<View style={commonStyle.row}>
						<View style={orderStyle.listRow}>
							<Text style={[orderStyle.listLable]}>委托量(吨)</Text>
							<Text style={[orderStyle.listValue]}>{sumPlanQuantity || '-'}</Text>
						</View>
						<View style={orderStyle.listRow}>
							<Text style={[orderStyle.listLable]}>已排量(吨)</Text>
							<Text style={[orderStyle.listValue]}>{sumDispatchQuantity || '-'}</Text>
						</View>
						<View style={orderStyle.listRow}>
							<Text style={[orderStyle.listLable]}>已运量(吨)</Text>
							<Text style={[orderStyle.listValue]}>{sumSheetQuantity || '-'}</Text>
						</View>
					</View>
					<View style={commonStyle.row}>
						<View style={{ flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'flex-end', flex: 1 }}>
							<Text style={[orderStyle.listLoad, { marginTop: 5 * scale }]} onPress={() => { navigationSeevice.navigate('WlmxDetailsPage', { subjectPlanId, orderType, noticeId }) }}>[物流明细]</Text>
						</View>
					</View>
				</View>
			</View>
		)

	}

	render () {
		let { status } = this.state;
		return (
			<View style={{ flex: 1, backgroundColor: '#f5f5f5', }}>
				<View style={styles.listBox}>
					{
						status == 'data' ? (<FlatList
							data={this.state.newLotData}
							renderItem={(data) => this._renderItem(data)}
							refreshing={this.state.loadIcon}
							onRefresh={this._isLoadRefresh.bind(this)}
							onEndReachedThreshold={1}
							onEndReached={() => { this._loadData() }}
						/>) : <PageStatusIndex status={status} emptyText="暂无记录" onErrorPress={this._onErrorPress} />
					}
				</View>
			</View>
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#E2E6F1'
	},
	listBox: {
		flex: 1,
	},
	bombBody: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	bombImg: {
		marginRight: 4 * scale,
		width: 14 * scale,
		height: 14 * scale,
	},
	headBox: {
		backgroundColor: style.color.themeColor,
		height: 55 * scale,
		// width: '100%',
	},
	outSearch: {
		height: 36 * scale,
		// width: '100%',
		flexDirection: 'row',
		justifyContent: 'center',
	},
	nerSearch: {
		height: 36 * scale,
		width: '80%'
	},
	searchStyle: {
		height: 36 * scale,
	},
	itemBox: {
		width: 350 * scale,
	},
	itemBoxHead: {
		height: 40 * scale,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center'
	},
	itemHeadTitle: {
		fontSize: 14 * scale,
		color: '#272727',
		paddingLeft: 3 * scale
	},
	itemBody: {
		backgroundColor: style.color.white,
		width: 350 * scale,
		borderRadius: 6 * scale,
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		paddingLeft: 10 * scale,
		paddingRight: 10 * scale
	},
	listItem: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	lable: {
		color: '#666',
		width: 50 * scale,
		fontSize: 13 * scale,
		lineHeight: 26 * scale
	},
	value: {
		color: '#111',
		fontSize: 13 * scale,
	},
	value2: {
		color: '#148CFB',
		fontSize: 13 * scale
	},
	time: {
		fontSize: 12 * scale,
		color: '#999'
	},
	btnText: {
		width: '80%',
		height: 40 * scale,
		lineHeight: 40 * scale,
		color: style.color.white,
		textAlign: 'center',
		backgroundColor: style.color.themeColor,
		marginLeft: '10%',
		borderRadius: 4 * scale,
		marginBottom: 15 * scale
	},
	dateSelect: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
		marginRight: 14 * scale,
		marginTop: 12 * scale,
	},
	timeValue: {
		fontSize: 12 * scale,
		color: style.color.atrous,
		marginLeft: 8 * scale
	},
	btnWarp: {
		height: 72 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
	},
})